<template>
  <!-- 方案修改和实施情况-->
  <div class="schemeApproval">
    <a-spin :spinning="loading">
      <title-name title="方案修改和实施情况" style="margin-top: 50px"></title-name>
      <div class="table-div">
        <h3 class="updateSummary-h3">方案意见回复统计表</h3>
        <a-table class="takeOut-hover" :columns="columns" bordered :pagination="false" :data-source="replyList"> </a-table>
      </div>
      <div class="table-div">
        <h3 class="updateSummary-h3">技术复核情况（计划内）</h3>
        <a-table class="takeOut-hover" :columns="columnsTwo" bordered :pagination="false" :data-source="checkInList">
          <template slot="fileInfoList" slot-scope="text, record">
            <UploadList multiple :uploadArrys="text || []" :isShow="false" disabled />
          </template>
        </a-table>
      </div>
      <div class="table-div">
        <h3 class="updateSummary-h3">技术复核情况（计划外）</h3>
        <a-table class="takeOut-hover" :columns="columnsThree" bordered :pagination="false" :data-source="checkOutList">
          <template slot="fileInfoList" slot-scope="text, record">
            <UploadList multiple :uploadArrys="text || []" :isShow="false" disabled />
          </template>
        </a-table>
      </div>
      <div class="table-div">
        <h3 class="updateSummary-h3">方案验收统计表</h3>
        <a-table class="takeOut-hover" :columns="columnsFour" bordered :pagination="false" :data-source="acceptList"> </a-table>
      </div>
    </a-spin>
  </div>
</template>
    <script>
import { summaryMixin } from './mergeCell'
import { queryMonthTechnicalProgrameditList } from '@/api/technical/summary' // api
import UploadList from '@/components/UploadList'
export default {
  mixins: [summaryMixin], //混入文件
  name: 'a' + Date.now(),
  props: {
    monthTechnicalId: {
      type: String,
      default() {
        return ''
      }
    },
    orgTreeObj:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  components: {
    UploadList
  },
  data() {
    ;(this.columns = [
      {
        title: '所属分公司',
        align: 'center',
        dataIndex: 'branchComId',
        width: '22%',
        customRender: (text, row, index) => {
          // this.$nextTick(() => {
          let rowSpan = 1
          if (index != 0 && text === this.replyList[index - 1].branchComId) {
            rowSpan = 0
            // 若不是，则往下合并与改行考核内容一致行的总行数
          } else {
            rowSpan = [...this.replyList].filter((i) => i.branchComId == text).length
          }
          return {
            children: row.branchCompany,
            attrs: {
              rowSpan: rowSpan,
            },
          }
          // })
        },
      },
      {
        title: '所属项目名称',
        align: 'center',
        dataIndex: 'projectName',
        width: '18%',
        customRender: (text, row, index) => {
          let rowSpan = 1
          if (index != 0 && text === this.replyList[index - 1].projectName && row.branchCompany === this.replyList[index - 1].branchCompany) {
            rowSpan = 0
            // 若不是，则往下合并与改行考核内容一致行的总行数
          } else {
            rowSpan = [...this.replyList].filter((i) => i.projectName == text && row.branchCompany === i.branchCompany).length
          }
          return {
            children: text,
            attrs: {
              rowSpan: rowSpan
            }
          }
          // })
        }
      },
      { title: '施组方案名称', align: 'center', dataIndex: 'programName', width: '15%' },
      { title: '方案类别', dataIndex: 'planTypeName', align: 'center', width: '15' },
      { title: '问题数量', dataIndex: 'questionNum', align: 'center', width: '15%' },
      { title: '已回复数量', dataIndex: 'replyNum', align: 'center', width: '15%' }
    ]),
      (this.columnsTwo = [
        {
          title: '所属分公司',
          align: 'center',
          dataIndex: 'branchComId',
          width: '15%',
          customRender: (text, row, index) => {
          // this.$nextTick(() => {
          let rowSpan = 1
          if (index != 0 && text === this.checkInList[index - 1].branchComId) {
            rowSpan = 0
            // 若不是，则往下合并与改行考核内容一致行的总行数
          } else {
            rowSpan = [...this.checkInList].filter((i) => i.branchComId == text).length
          }
          return {
            children: row.branchCompany,
            attrs: {
              rowSpan: rowSpan,
            },
          }
          // })
        },
        },
        {
          title: '所属项目名称',
          align: 'center',
          dataIndex: 'projectName',
          width: '15%',
          customRender: (text, row, index) => {
            let rowSpan = 1
            if (index != 0 && text === this.checkInList[index - 1].projectName && row.branchCompany === this.checkInList[index - 1].branchCompany) {
              rowSpan = 0
              // 若不是，则往下合并与改行考核内容一致行的总行数
            } else {
              rowSpan = [...this.checkInList].filter((i) => i.projectName == text && row.branchCompany === i.branchCompany).length
            }
            return {
              children: text,
              attrs: {
                rowSpan: rowSpan
              }
            }
            // })
          }
        },
        { title: '施组方案名称', dataIndex: 'programName', align: 'center', width: '8%' },
        { title: '方案类别', dataIndex: 'planTypeName', align: 'center', width: '8%' },
        { title: '复核结论', dataIndex: 'checkResult', align: 'center', width: '8%' },
        { title: '复核项目', dataIndex: 'checkProject', align: 'center', width: '8%' },
        { title: '复核内容', dataIndex: 'checkOptions', align: 'center', width: '18%', ellipsis: true,},
        { title: '复核时间', dataIndex: 'checkDate', align: 'center', width: '8%' },
        { title: '复核照片', dataIndex: 'fileInfoList', align: 'center', width: '18%', scopedSlots: { customRender: 'fileInfoList' } }
      ]),
      (this.columnsThree = [
        {
          title: '所属分公司',
          align: 'center',
          dataIndex: 'branchComId',
          width: '15%',
          customRender: (text, row, index) => {
          // this.$nextTick(() => {
          let rowSpan = 1
          if (index != 0 && text === this.checkOutList[index - 1].branchComId) {
            rowSpan = 0
            // 若不是，则往下合并与改行考核内容一致行的总行数
          } else {
            rowSpan = [...this.checkOutList].filter((i) => i.branchComId == text).length
          }
          return {
            children: row.branchCompany,
            attrs: {
              rowSpan: rowSpan,
            },
          }
          // })
        },
        },
        {
          title: '所属项目名称',
          align: 'center',
          dataIndex: 'projectName',
          width: '15%',
          customRender: (text, row, index) => {
            let rowSpan = 1
            if (index != 0 && text === this.checkOutList[index - 1].projectName && row.branchCompany === this.checkOutList[index - 1].branchCompany) {
              rowSpan = 0
              // 若不是，则往下合并与改行考核内容一致行的总行数
            } else {
              rowSpan = [...this.checkOutList].filter((i) => i.projectName == text && row.branchCompany === i.branchCompany).length
            }
            return {
              children: text,
              attrs: {
                rowSpan: rowSpan
              }
            }
            // })
          }
        },
        { title: '施组方案名称', dataIndex: 'programName', align: 'center', width: '8%' },
        { title: '方案类别', dataIndex: 'planTypeName', align: 'center', width: '8%' },
        { title: '复核结论', dataIndex: 'checkResult', align: 'center', width: '8%' },
        { title: '复核项目', dataIndex: 'checkProject', align: 'center', width: '8%',ellipsis: true,},
        { title: '复核内容', dataIndex: 'checkOptions', align: 'center', width: '18%',ellipsis: true,},
        { title: '复核时间', dataIndex: 'checkDate', align: 'center', width: '8%' },
        { title: '复核照片', dataIndex: 'fileInfoList', align: 'center', width: '18%', scopedSlots: { customRender: 'fileInfoList' },ellipsis: true,}
      ]),
      (this.columnsFour = [
        {
          title: '所属分公司',
          align: 'center',
          dataIndex: 'branchComId',
          width: '16%',
          customRender: (value, row, index) => {
            const obj = {
              children: row.branchCompany || '/',
              attrs: {}
            }
            obj.attrs.rowSpan = this.mergeCellKey(row.branchComId, this.acceptList, 'branchComId')
            return obj
          }
        },
        {
          title: '所属项目名称',
          align: 'center',
          dataIndex: 'projectName',
          width: '18%',
          customRender: (text, row, index) => {
            let rowSpan = 1
            if (index != 0 && text === this.acceptList[index - 1].projectName && row.branchCompany === this.acceptList[index - 1].branchCompany) {
              rowSpan = 0
              // 若不是，则往下合并与改行考核内容一致行的总行数
            } else {
              rowSpan = [...this.acceptList].filter((i) => i.projectName == text && row.branchCompany === i.branchCompany).length
            }
            return {
              children: text,
              attrs: {
                rowSpan: rowSpan
              }
            }
            // })
          }
        },
        { title: '施组方案名称', dataIndex: 'programName', align: 'center', width: '12%' },
        { title: '方案类别', dataIndex: 'planTypeName', align: 'center', width: '9%' },
        { title: '方案审批通过时间', dataIndex: 'planReviewTime', align: 'center', width: '9%' },
        { title: '验收人', dataIndex: 'acceptName', align: 'center', width: '9%' },
        { title: '验收时间', dataIndex: 'endAuditDate', align: 'center', width: '9%' },
        { title: '验收结论', dataIndex: 'acceptResult', align: 'center', width: '9%' },
        { title: '验收结果', dataIndex: 'acceptOpinions', align: 'center', width: '9%' }
      ])
    return {
      loading:false,
      acceptList: [], //方案验收统计表
      checkInList: [], //技术复核情况（计划内）
      checkOutList: [], //技术复核情况（计划外）
      replyList: [] //方案意见回复统计表
    }
  },
  watch: {
    monthTechnicalId: {
      handler(val) {
        this.queryMonthTechnicalProgrameditListFn(val,this.orgTreeObj);
      },
      immediate: true
    },
    orgTreeObj:{
      handler(newVal) {
        this.queryMonthTechnicalProgrameditListFn(this.monthTechnicalId,newVal);
			},
			deep:true, // 深度监听
			//immediate:true, // 初始化监听
    }
  },
  methods: {
    queryMonthTechnicalProgrameditListFn(id,searchQuery){
      let obj = {
        monthTechnicalId:id,
        searchQuery,
      }
      this.loading = true
      queryMonthTechnicalProgrameditList(obj).then((res) => {
        this.loading = false
        if (res.code == '0') {
          let data = res.data
          this.acceptList = data.acceptList
          this.checkInList = data.checkInList
          this.checkOutList = data.checkOutList
          this.replyList = data.replyList
        }
      })
    }
  },
  mounted() {}
}
</script>
    <style lang="less" scoped>
    @deep: ~'>>>';
  .schemeApproval{
   .updateSummary-h3{
          line-height: 45px;
          width: 100%;
          text-align: center;
          background: rgb(244, 244, 244);
          border: 1px solid gainsboro;
          border-bottom: none;
          font-size: 14px;
          margin: 0;
      }
    @{deep}.titleName{
      margin-top:10px!important;
    }
    .table-div{
      margin-bottom: 40px;
    }
  }
  </style>
    